<template>
  <div class="dataReport">
    <div class="categoryBox">
      <div class="categoryHeaderBox flex">
        <div class="flex1">
          <span style="font-weight: 600">{{dbNames}}</span>
        </div>
        <div class="flex1" style="text-align:right;padding-right:5px">
          <el-popover :popper-class="'reportPopover'" placement="bottom" width="30" trigger="hover">
            <div class="popBox">
              <el-tooltip class="item" effect="dark" content="sql查询" placement="right">
                <i class="el-icon-search" @click.stop.prevent="sqlTable()"></i>
              </el-tooltip>
            </div>
            <span slot="reference" class="jstarfont jstar-gengduo finger"></span>
          </el-popover>
        </div>
      </div>

      <div class="listData">
        <div class="treeList">
          <ul>
            <li
              v-for="(items, idx) in listData"
              :key="idx"
              @click="goDetail(items,idx)"
              :class="idx==indexs?'skyBlue':''"
            >
              {{items.tableName}}
              <span v-if="items.aliasName">({{items.aliasName}})</span>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 右侧内容 -->
    <div class="reportBox">
      <div class="topTag">
        <el-tag
          :key="index"
          v-for="(tag,index) in dynamicTags"
          closable
          :disable-transitions="false"
          @close="handleClose(tag,index)"
          @click="handleCk(tag,index)"
          :class="index==inds?'bgBlue':''"
          type="info"
        >
          <em v-if="tag.tableName">{{tag.tableName}}</em>
          <em v-else-if="tag.aliasName">{{tag.aliasName}}搜索</em>
        </el-tag>
      </div>

      <sqlSeach v-show="sqlShow"></sqlSeach>

      <div class="contain" v-show="repShow">
        <em
          @click="editQuery"
          style="float:right;margin-right:10px;cursor: pointer;  position: absolute; z-index: 9;color:#1890ff; right:25px;top:25px"
        >
          <i class="el-icon-edit-outline"></i>
          {{saveBtn}}
        </em>

        <el-tabs v-model="activeName" type="border-card" style="min-height:300px">
          <el-tab-pane name="first">
            <span slot="label">
              <i class="el-icon-s-order"></i> 属性
            </span>

            <div class="justTitle">
              <i class="el-icon-finished"></i>
              字段明细
            </div>

            <div class="flex">
              <div class="flex1">
                <em>表名：</em>
                <input type="text" v-model="showCode" disabled="false" />
              </div>
              <div class="flex1">
                <em>显示名称：</em>
                <input type="text" v-model="showName" :disabled="disabled" style="width:81.5%" />
              </div>
            </div>

            <div class="flex">
              <div class="flex1">
                <em style="width:9%;float:left">标签：</em>
                <div class="tagTip">
                  <el-tag
                    :key="index"
                    v-for="(tag,index) in tagName"
                    :closable="isEditShow"
                    :disable-transitions="false"
                    @close="tagClose(tag)"
                  >{{tag}}</el-tag>
                  <span v-show="isEditShow">
                    <el-input
                      class="input-new-tag"
                      v-if="inputVisible"
                      v-model="inputValue"
                      ref="saveTagInput"
                      size="small"
                      @keyup.enter.native="handleInputConfirm"
                      @blur="handleInputConfirm"
                    ></el-input>
                    <el-button
                      v-else
                      class="button-new-tag"
                      size="small"
                      @click="showInput"
                    >+ New Tag</el-button>
                  </span>
                </div>
              </div>
            </div>

            <!-- <div class="justTitle">
              <i class="el-icon-document"></i>更多设置
              <span style="float:right;margin-right:10px;cursor: pointer;">
                <i class="el-icon-sort"></i>展开
              </span>
            </div>-->

            <el-table
              v-loading="loading"
              :data="dataList.columns"
              border
              stripe
              style="width: 100%;"
              v-if="dataList"
            >
              <el-table-column type="index" fixed label="序号" :align="'center'" width="50"></el-table-column>
              <el-table-column prop="columnName" label="字段代码" :align="'center'" width="180"></el-table-column>
              <el-table-column prop="aliasName" label="字段名称" :align="'center'" width="250">
                <template slot-scope="scope">
                  <input type="text" :disabled="disabled" v-model="scope.row.aliasName" />
                </template>
              </el-table-column>
              <el-table-column prop="comment" label="注释" :align="'center'" width="250">
                <template slot-scope="scope">
                  <input type="text" :disabled="disabled" v-model="scope.row.comment" />
                </template>
              </el-table-column>
              <el-table-column prop="columnSize" label="长度" :align="'center'" width="160"></el-table-column>
              <el-table-column prop="columnType" label="字段类型" :align="'center'"></el-table-column>
              <el-table-column prop="decimalDigits" label="精度" :align="'center'" width="160"></el-table-column>
              <el-table-column prop="isAutoincrement" label="自增" :align="'center'" width="100"></el-table-column>
              <!-- <el-table-column prop="jdbcType" label="数字" :align="'center'" width="100"></el-table-column> -->
              <el-table-column prop="nullable" label="为空" :align="'center'" width="100">
                <template slot-scope="scope">
                  <span class="jstarfont finger color-blue">{{scope.row.nullable == 0 ? "否" : "是"}}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane name="second">
            <span slot="label">
              <i class="el-icon-s-data"></i> 数据
            </span>

            <el-table
              v-loading="loading"
              :data="showDbTable.rows"
              border
              stripe
              style="width: 100%;"
              v-if="showDbTable"
            >
              <el-table-column type="index" fixed label="序号" :align="'center'"></el-table-column>
              <el-table-column
                :prop="item.label"
                v-for="(item,index) in showDbTable.columns"
                :key="index"
                :label="item.label"
                :align="'center'"
                width="200"
                :show-overflow-tooltip="istrue"
              ></el-table-column>
            </el-table>
            <el-pagination
              style="float: right; margin-top: 20px"
              :current-page.sync="pn"
              @current-change="changePage"
              @size-change="changePage"
              :page-size.sync="ps"
              :page-sizes="[10, 15, 20, 25, 30]"
              layout="sizes, total, prev, pager, next, jumper"
              :total="totalSize"
            ></el-pagination>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import localStorage from '@/utils/localStorage'
import sqlSeach from './modul/sqlSeach.vue'
export default {
  components: {
    sqlSeach,
  },
  data() {
    return {
      dbNames: '',
      isEditShow: false,
      inputVisible: false,
      inputValue: '',
      repShow: false,
      sqlShow: false,
      dynamicTags: [],
      isHide: false,
      sqlQuery: '',
      ps: 15,
      pn: 1,
      totalSize: 0,
      istrue: true,
      activeName: 'first',
      addDbData: '',
      showCode: '',
      showName: '',
      tagName: [],
      dbSecrekey: '',
      listData: [],
      dataList: [],
      disabled: true,
      saveBtn: '编辑',
      dbTable: [],
      selectDbValue: '',
      treeProps: {
        children: 'children',
        label: 'tableName',
      },
      indexs: '',
      indexx: 0,
      inds: '',
      isEdit: false,
      showDbTable: '',
      isEdit: false,
      loading: false,
    }
  },
  created() {
    this.getDbLists()
  },
  mounted() {
    this.lgDbName = localStorage.get('db')
    this.dbNames = this.lgDbName.name
  },
  methods: {
    tagClose(tag) {
      this.tagName.splice(this.tagName.indexOf(tag), 1)
    },

    showInput() {
      this.inputVisible = true
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },

    handleInputConfirm() {
      let inputValue = this.inputValue
      if (inputValue) {
        this.tagName.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    },

    //关闭标签
    handleClose(tag, index) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
      if (index > 0) {
        this.inds = index - 1
      } else {
        this.inds = index + 1
      }
      if (!tag.aliasName) {
        return
      } else {
        this.sqlShow = false
        this.repShow = true
      }
      if (this.dynamicTags.length == 0) {
        this.sqlShow = false
        this.repShow = false
      }
    },

    handleCk(tag, index) {
      this.inds = index
      console.log(tag)
      localStorage.set('dbItem', tag.tableName)
      try {
        let params = {
          params: localStorage.get('dbItem'),
          id: localStorage.get('dbSecrekey'),
        }
        this.getShowDbTable()
        this.$db.getTableMsg(params).then((res) => {
          if (res.code == 200) {
            this.dataList = res.data
            this.showCode = res.data.tableName
            this.showName = res.data.aliasName
            this.tagName = res.data.tags
            this.loading = false
          } else {
            this.$message.error(res.code + '-' + res.msg)
          }
        })
        this.sqlShow = false
        this.repShow = true
      } catch (error) {
        this.sqlShow = true
        this.repShow = false
      }
    },

    //打开Tbale标签
    sqlTable() {
      const item = localStorage.get('db')
      this.dynamicTags.push(item)
      this.sqlShow = true
      this.repShow = false
      console.log(this.dynamicTags)
      if (this.dynamicTags.length > 0) {
        this.inds = this.dynamicTags.length - 1
      } else {
        this.inds = 0
      }
    },

    //二维数组去重
    getUnique(array) {
      let obj = {}
      return array.filter((item, index) => {
        // 防止key重复
        let newItem = item + JSON.stringify(item)
        return obj.hasOwnProperty(newItem) ? false : (obj[newItem] = true)
      })
    },

    //点击表查询属性和数据
    goDetail(items, idx) {
      this.dynamicTags.push(items)
      console.log(this.dynamicTags)
      console.log(this.dynamicTags.length)
      this.inds = this.dynamicTags.length - 1
      this.indexs = idx
      let params = {
        params: items.tableName,
        id: localStorage.get('dbSecrekey'),
      }
      localStorage.set('dbItem', items.tableName)
      this.repShow = true
      this.sqlShow = false
      this.getShowDbTable()
      this.$db.getTableMsg(params).then((res) => {
        if (res.code == 200) {
          this.dataList = res.data
          this.showCode = res.data.tableName
          this.showName = res.data.aliasName
          this.loading = false
        } else {
          this.$message.error(res.code + '-' + res.msg)
        }
      })
    },

    //分页
    changePage() {
      this.getShowDbTable()
    },

    //数据列表
    getDbLists() {
      let dbId = localStorage.get('dbSecrekey')
      this.$db.getDbList(dbId).then((res) => {
        if (res.code == 200) {
          this.listData = res.data
        } else {
          this.$message.error(res.code + '-' + res.msg)
        }
      })
    },

    //数据表展示
    getShowDbTable() {
      this.loading = true
      let para = {
        params: localStorage.get('dbItem'),
        id: localStorage.get('dbSecrekey'),
      }
      let params = {
        pn: this.pn,
        ps: this.ps,
      }
      this.$db.getShowTable(params, para).then((res) => {
        if (res.code == 200) {
          this.loading = false
          this.totalSize = res.data.total * 1
          this.showDbTable = res.data
        } else {
          this.$message.error(res.code + '-' + res.msg)
        }
      })
    },

    //编辑
    editQuery() {
      if (this.disabled == true) {
        this.disabled = false
        this.isEditShow = true
        this.saveBtn = '保存'
      } else {
        this.disabled = true
        this.isEditShow = false
        this.saveBtn = '编辑'
        const params = {
          params: this.dataList.tableName,
          id: localStorage.get('dbSecrekey'),
          dataFile: {
            columns: this.dataList.columns,
            tableName: this.showCode,
            aliasName: this.showName,
            tags: this.tagName,
          },
        }
        this.$db.putTableMsg(params).then((res) => {
          if (res.code == 200) {
            const params = {
              params: localStorage.get('dbItem'),
              id: localStorage.get('dbSecrekey'),
            }
            this.$db.getTableMsg(params).then((res) => {
              if (res.code == 200) {
                this.dataList = res.data
                this.loading = false
                this.$message.success(res.msg)
              }
            })
          }
        })
      }
      console.log(this.dataList)
    },
  },
}
</script>

<style lang="less">
.reportPopover {
  min-width: 0px;
  .popBox {
    display: flex;
    flex-direction: column;
    // justify-content: space-between;
    align-items: center;
    // height: 60px;
    i {
      margin-bottom: 10px;
    }
  }
}
.dataReport {
  box-sizing: border-box;
  width: 100%;
  height: calc(100vh - 85px);
  .el-tree-node__children {
    font-size: 12px;
  }

  .el-tree-node__content {
    height: 40px;
    line-height: 40px;
    font-size: 13px;
  }

  .el-checkbox__input.is-disabled .el-checkbox__inner {
    display: none;
  }
  .categoryBox {
    box-shadow: 0 0 2px 1px rgb(199, 199, 199);
    overflow: auto;
    width: 240px;
    height: 100%;
    float: left;
    background-color: white;
    .categoryHeaderBox {
      height: 60px;
      padding-left: 22px;
      // line-height: 60px;
      align-items: center;
      font-size: 24px;
      position: relative;
      .iconTip {
        position: absolute;
        right: 10px;
        font-size: 16px;
        color: #409eff;
      }
    }
    .el-tree {
      margin-top: 0;
    }
    .el-tree-node__content {
      position: relative;
    }
    .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
      width: 160px;
      .reportIconBox {
        position: absolute;
        right: 10px;
        i {
          margin: 0 3px;
        }
      }
    }
    .addCategoryBtnBox {
      height: 40px;
      width: 100%;
      i {
        font-size: 18px;
        font-weight: 600;
        color: #409eff;
        cursor: pointer;
      }
    }

    .listData {
      .treeList {
        width: 100%;
        .title {
          height: 40px;
          width: 100%;
          line-height: 40px;
          padding-left: 10px;
          cursor: pointer;
          position: relative;

          .reportIconBox {
            position: absolute;
            right: 10px;
            i {
              margin: 0 3px;
            }
          }
        }
        ul {
          margin-top: -10px;
          width: 95%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          li {
            margin: 12px 0;
            cursor: pointer;
            list-style: none;
            overflow: hidden;
          }
          :hover {
            color: #1890ff;
          }
        }
      }
    }
  }
  .reportBox {
    overflow: auto;
    height: 100%;
    box-sizing: border-box;
    padding: 16px;
    .topTag {
      width: 100%;
      overflow: auto;
      cursor: pointer;
      .el-tag + .el-tag {
        margin-left: 10px;
      }
    }
    .contain {
      position: relative;
      padding: 16px 16px 16px 0;
    }
    .flex {
      margin: 15px 0;
      .flex1 {
        em {
          display: inline-block;
          width: 18%;
          text-align: right;
          color: #409eff;
          background-color: rgb(222, 230, 251);
          height: 30px;
          line-height: 30px;
          border-top-left-radius: 4px;
          border-bottom-left-radius: 4px;
        }
        input {
          border: 1px solid rgb(237, 237, 237);
          width: 70%;
          height: 29px;
        }
      }
      .tagTip {
        width: 89.6%;
        margin-left: 1%;
        float: left;
        .el-tag + .el-tag {
          margin-left: 10px;
        }
        .button-new-tag {
          margin-left: 10px;
          height: 32px;
          line-height: 30px;
          padding-top: 0;
          padding-bottom: 0;
        }
        .input-new-tag {
          width: 90px;
          margin-left: 10px;
          vertical-align: bottom;
        }
      }
    }
    .contentBox {
      overflow: auto;
      .addBox {
        height: 170px;
        width: 230px;
        margin: 16px;
        box-sizing: border-box;
        border-radius: 6px;
        box-shadow: 0 0 2px rgb(168, 168, 168);
        .jstarfont {
          font-size: 66px;
          color: #409eff;
        }
        &:hover {
          box-shadow: 0 0 6px #409eff;
        }
      }
      .jstarfont {
        margin: 0 3px;
      }
      .addBox2 {
        height: 40px;
        width: 100%;
      }
      & > div {
        float: left;
      }
    }
    .justTitle {
      background-color: rgb(222, 230, 251);
      height: 30px;
      line-height: 30px;
      margin: 10px 0;
      border-radius: 4px;
      color: #1890ff;
      padding: 0 8px;
    }
  }
  .el-dialog__footer {
    border-top: 1px solid #e6ebf5;
    text-align: center;
    .el-button {
      margin: 10px 15px 0;
    }
  }
}

.skyBlue {
  color: #1890ff;
}
.bgBlue {
  background-color: rgb(207, 217, 247) !important;
  color: #409eff !important;
}
</style>